<template>
    <Transition
        enter-active-class="transition ease-out duration-300"
        enter-from-class="opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
        enter-to-class="opacity-100 translate-y-0 sm:translate-x-0"
        leave-active-class="transition ease-in duration-200"
        leave-from-class="opacity-100 translate-y-0 sm:translate-x-0"
        leave-to-class="opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
    >
        <div
            v-if="visible"
            class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50 max-w-sm w-full"
        >
            <div
                class="rounded-lg shadow-lg border p-4 bg-white"
                :class="{
                    'border-green-200 bg-green-50': type === 'success',
                    'border-red-200 bg-red-50': type === 'error',
                    'border-blue-200 bg-blue-50': type === 'info',
                }"
            >
                <div class="flex items-start gap-3">
                    <div
                        class="flex-shrink-0"
                        :class="{
                            'text-green-600': type === 'success',
                            'text-red-600': type === 'error',
                            'text-blue-600': type === 'info',
                        }"
                    >
                        <svg
                            v-if="type === 'success'"
                            class="h-5 w-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                        <svg
                            v-else-if="type === 'error'"
                            class="h-5 w-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                        <svg
                            v-else
                            class="h-5 w-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p
                            class="text-sm font-medium"
                            :class="{
                                'text-green-800': type === 'success',
                                'text-red-800': type === 'error',
                                'text-blue-800': type === 'info',
                            }"
                        >
                            {{ message }}
                        </p>
                    </div>
                    <button
                        @click="close"
                        class="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors"
                    >
                        <svg
                            class="h-4 w-4"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';

const props = defineProps({
    type: {
        type: String,
        default: 'info',
        validator: (value) => ['success', 'error', 'info'].includes(value),
    },
    message: {
        type: String,
        required: true,
    },
    duration: {
        type: Number,
        default: 3000,
    },
});

const emit = defineEmits(['close']);

const visible = ref(true);
let timeoutId = null;

const close = () => {
    visible.value = false;
    emit('close');
};

onMounted(() => {
    if (props.duration > 0) {
        timeoutId = setTimeout(() => {
            close();
        }, props.duration);
    }
});

onUnmounted(() => {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
});

watch(visible, (newValue) => {
    if (!newValue && timeoutId) {
        clearTimeout(timeoutId);
    }
});
</script>

